// EAccordion.qml
import QtQuick
import QtQuick.Layouts
import QtQuick.Effects

ColumnLayout {
    id: root
    spacing: 0

    // ==== 外部接口 ====
    property bool backgroundVisible: true
    property string title: "点击展开"
    property bool expanded: false
    default property alias content: contentLayout.data

    // 内置下拉选项模式
    property bool useOptions: false         // 是否使用下拉选项
    property var options: []                // 下拉选项 ["选项1", "选项2"]
    property int currentIndex: -1           // 当前选中下标
    property string currentText: ""         // 当前选中内容
    signal optionSelected(string text, int index) // 选中事件

    // ==== 样式属性 ====
    property real radius: 20
    property color headerColor: theme.secondaryColor
    property color headerHoverColor: Qt.darker(headerColor, 1.1)    //悬停的颜色
    property color optionHoverColor: Qt.rgba(0/255, 91/255, 182/255, 0.8) // 选中颜色 // ✅ 新增接口：下拉项悬停颜色
    property color textColor: theme.textColor
    property color shadowColor: theme.shadowColor
    property bool shadowEnabled: true
    property int headerHeight: 52

    // ==== 新增：判断全局坐标是否在 Accordion 内 ====
    function contains(x, y) {
        let p = root.mapFromItem(null, x, y)
        return p.x >= 0 && p.x <= root.width && p.y >= 0 && p.y <= root.height
    }

    // ==== 1. 标题栏 ====
    Item {
        id: headerContainer
        width: parent.width
        height: root.headerHeight
        Layout.fillWidth: true

        // 阴影
        MultiEffect {
            source: header
            anchors.fill: header
            visible: root.shadowEnabled && root.backgroundVisible
            shadowEnabled: true
            shadowColor: root.shadowColor
            shadowBlur: theme.shadowBlur
            shadowVerticalOffset: theme.shadowYOffset
            shadowHorizontalOffset: theme.shadowXOffset
        }

        Rectangle {
            id: header
            visible: root.backgroundVisible
            anchors.fill: parent
            radius: root.radius
            color: mouseArea.containsMouse ? root.headerHoverColor : root.headerColor
            Behavior on color { ColorAnimation { duration: 150 } }
        }

        RowLayout {
            anchors.fill: parent
            anchors.leftMargin: 12
            anchors.rightMargin: 12
            spacing: 8

            // 显示当前选中或者默认标题
            Text {
                text: useOptions && currentText !== "" ? currentText : root.title
                color: root.textColor
                font.pixelSize: 16
                font.bold: true
                verticalAlignment: Text.AlignVCenter   // 垂直居中
                horizontalAlignment: Text.AlignHCenter // 水平居中
                Layout.fillWidth: true
            }

            // 箭头
            Text {
                text: "\uf054"
                font.family: "Font Awesome 6 Free"
                font.pixelSize: 16
                color: root.textColor
                rotation: root.expanded ? -90 : 90
                Behavior on rotation {
                    RotationAnimation { duration: 250; easing.type: Easing.InOutQuad }
                }
            }
        }

        MouseArea {
            id: mouseArea
            anchors.fill: parent
            hoverEnabled: true
            cursorShape: Qt.PointingHandCursor
            onClicked: root.expanded = !root.expanded
        }
    }

    // ==== 2. 内容区 ====
    Rectangle {
        id: contentWrapper
        radius: root.radius
        Layout.fillWidth: true
        color: root.backgroundVisible ? theme.secondaryColor : "transparent"
        height: root.expanded ? contentLayout.implicitHeight : 0
        clip: true
        Layout.topMargin: 8

        Behavior on height {
            NumberAnimation { duration: 250; easing.type: Easing.OutCubic }
        }

        ColumnLayout {
            id: contentLayout
            width: parent.width

            // 内置下拉选项
            Repeater {
                model: root.useOptions ? root.options : []
                Rectangle {
                    width: parent.width
                    height: 40
                        // ✅ 修改悬停效果：引用本下拉项的 MouseArea ID
                    color: mouseAreaOption.containsMouse ? root.optionHoverColor : "transparent"


                    Text {
                        text: modelData
                        anchors.centerIn: parent
                        color: root.textColor
                        font.pixelSize: 14
                    }

                    MouseArea {
                        id: mouseAreaOption  // ✅ 每个下拉项独立的 MouseArea
                        anchors.fill: parent
                        hoverEnabled: true
                        cursorShape: Qt.PointingHandCursor
                        onClicked: {
                            root.currentIndex = index
                            root.currentText = modelData
                            root.expanded = false
                            root.optionSelected(modelData, index)
                        }
                    }
                }
            }
        }
    }
}
